$("#detail-header").load("../pages/header.html");
$("#detail-foot").load("../pages/foot.html");
let Allcheked=false
function showlist() {
  let cart = JSON.parse(localStorage.getItem("Cart"));
  console.log(cart);
  let str = `
      <tr>
      <th><input type="checkbox" name="" id="" class="checkbox-all" ${
        Allcheked == true ? "checked" : ""
      }>全选</th>
      <th>商品编号</th>
      <th>商品图片</th>
      <th>商品信息</th>
      <th>单价</th>
      <th>数量</th>
      <th>总价</th>
      <th>操作</th>
  </tr>
      `;
  cart.forEach((item, index) => {
    str += `
          <tr>
          <td><input type="checkbox" name="" id="" class="checkbox-item" ${
            item.state == true ? "checked" : ""
          } ></td>
          <td>${item.id}</td>
          <td><img src="${item.img}"></td>
          <td  class="samll">${item.name}</td>
          <td class="singer">￥${item.price}</td>
          <td><input type="button" name="minus" value="-" class="minus" ${
            item.num > 1 ? "" : "disabled"
          }>
              <input type="text" name="amount" value="${
                item.num
              }"  class="amount"   >
              <input type="button" name="plus" value="+"   class="plus"></td>
          <td  class="all">￥${(item.price * item.num).toFixed(2)}</td>
          <td><a href="#"class="del" date-index='${index}'>删除</a></td>
      </tr> 
          `;
  });
  $('table').html(str)
//   table.innerHTML = str;
//   AllPrice();
}
showlist();

const table=document.querySelector('table')
//委托事件
table.addEventListener("click", (e) => {
    e = e || window.event;
    let target = e.target || e.srcElement;
    //全选
    if (target.getAttribute("class") == "checkbox-all") {
      let arr = JSON.parse(localStorage.getItem("Cart"));
      Allcheked = !Allcheked;
      console.log(Allcheked);
      if (Allcheked) {
        arr.forEach((item) => (item.state = true));
      } else {
        arr.forEach((item) => (item.state = false));
      }
      localStorage.setItem("Cart", JSON.stringify(arr));
      showlist();
      AllPrice()
    }
    //单选
    if (target.getAttribute("class") == "checkbox-item") {
      let arr = JSON.parse(localStorage.getItem("Cart"));
      let id = target.parentElement.nextElementSibling.innerHTML;
      let pro = arr.find((item) => item.id == id);
      pro.state = !pro.state;
      Allcheked = arr.every((item) => item.state == true);
      localStorage.setItem("Cart", JSON.stringify(arr));
      showlist();
      AllPrice()
    }
    //加
    if (target.getAttribute("class") == "plus") {
      console.log(target);
      let arr = JSON.parse(localStorage.getItem("Cart"));
      let id =
        target.parentElement.parentElement.firstElementChild.nextElementSibling
          .innerHTML;
      console.log(id);
      let pro = arr.find((item) => item.id == id);
      pro.num++;
      pro.singlePrice = (pro.num * pro.price).toFixed(2);
      localStorage.setItem("Cart", JSON.stringify(arr));
      showlist();
      AllPrice()
    }
    //减
    if (target.getAttribute("class") == "minus") {
      console.log(target);
      let arr = JSON.parse(localStorage.getItem("Cart"));
      let id =
        target.parentElement.parentElement.firstElementChild.nextElementSibling
          .innerHTML;
      console.log(id);
      let pro = arr.find((item) => item.id == id);
      if (pro.num <=1) {alert("再减就打死你！"); }
       else {
        pro.num--
        pro.singlePrice = (pro.num * pro.price).toFixed(2);
        localStorage.setItem("Cart", JSON.stringify(arr));
        showlist();
        AllPrice()
      }
    }
    //删除
    if(target.getAttribute("class") == "del"){
      let arr = JSON.parse(localStorage.getItem("Cart"));
      let  index=target.getAttribute('date-index')
      console.log(index)
      arr.splice(index,1)
      localStorage.setItem('Cart',JSON.stringify(arr))
      showlist()
      AllPrice()
    }
  });
  //总价
  function  AllPrice(){
      let arr = JSON.parse(localStorage.getItem("Cart"));
      console.log('allprice',arr)
      const  span=document.querySelector('.box2>span')
      let all=arr.reduce((s,item) =>
      {return  s+=Number((item.price*item.num).toFixed(2))  //转成数据类型   不然就是字符串拼接
      },0)
      console.log('all',all)
      span.innerHTML=all
      localStorage.setItem('Cart',JSON.stringify(arr))
  }
  AllPrice()
  //改变数据
  table.addEventListener("change", (e)=>{
      e = e || window.event;
      let target = e.target || e.srcElement;
      if(target.getAttribute("class") == "amount"){
        let arr = JSON.parse(localStorage.getItem("Cart"));
        let num = target.value 
        console.log("num",num)
        let  id=target.parentElement.parentElement.firstElementChild.nextElementSibling.innerHTML
        console.log(id)
        if(num<0||isNaN(num)){
            alert('请输入大于0的整数')
            return
        }
        let pro=arr.find( (item) => item.id==id)
        console.log('pro',pro)
        pro.num = num
        pro.singlePrice=(num*pro.price).toFixed(2)
        console.log('singPrice',pro.singlePrice)
        
        localStorage.setItem('Cart',JSON.stringify(arr))
        showlist()
        AllPrice()
      }
  })
